<template>
  <view class="dayDetail flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack is-fixed title="生日纪念日" title-color="transparent"
                    @getPageHeight="getPageHeight" z-index="10"></s-header-title>
    <view class="dayDetail_birthday flex flex-column align-center" v-if="options.type == 1">
      <view class="hW_221"></view>
      <view>
        <template v-if="!!memberInfo && options.is_genealogy != 1">
          <image-avater :width="84" :height="84" :src="`${memberInfo.avatar}`"></image-avater>
        </template>
        <template v-else>
          <view class="wh_84 hW_84">
            <image :src="`${birthdayDetail.avatar}`" class="wh_84 hW_84" style="border-radius: 50%"></image>
          </view>
        </template>
      </view>
      <view class="hW_15"></view>
      <view class="dayDetail_birthday_name">
        <text class="dayDetail_birthday_name_text" style="font-size: 40rpx;color: #323232;">
          {{ options.index == 1 ? birthdayDetail.name : birthdayDetail.name }}
        </text>
      </view>
      <view class="hW_15"></view>
      <view class="dayDetail_birthday_timeDetails flex align-center justify-center">

        <text class="dayDetail_birthday_timeDetails_text" style="font-size: 24rpx;" :style="{
          color:birthdayDetail.date_type != 1 ? '#000000':'#E05E5B'
        }">
          {{ options.index == 1 ? birthdayDetail.public : birthdayDetail?.detail?.gregorian_date }}
        </text>
        <text class="dayDetail_birthday_timeDetails_text ml_10" style="font-size: 24rpx;" :style="{
          color:birthdayDetail.date_type != 1 ? '#E05E5B':'#000000'
        }">
          {{ options.index == 1 ? birthdayDetail.public_time : (birthdayDetail?.detail?.ganzhi_year + birthdayDetail?.detail?.lunar_date)
          }}
        </text>
        <text class="dayDetail_birthday_timeDetails_text  ml_10" style="font-size: 24rpx;color: #E05E5B;"
              v-if="!!birthdayDetail.detail">
          {{ dayjs(birthdayDetail?.detail?.gregorian_year).format('dddd') }}
        </text>
      </view>
      <view class="hW_44"></view>
      <view style="font-size: 36rpx;color: #E05E5B;font-weight: 500;">
        生日快乐
      </view>
      <view class="hW_9"></view>
      <image :src="`${IMG_URL}/index/happyBirthday.png`" style="width: 371rpx;height: 122rpx;"></image>
      <view class="hW_11"></view>
      <view class="dayDetail_birthday_timeDetails_title">
        <text class="dayDetail_birthday_timeDetails_title_text" style="font-size: 27rpx;color: #E05E5B;">{{
            Number(birthdayDetail?.detail?.full_year.split('周岁')[0]) + 1 }}岁生日倒计时
        </text>
      </view>
      <view class="dayDetail_birthday_timeDetails_day">
        <template v-if="birthdayDetail.countdownDay > 0">
          <text class="dayDetail_birthday_timeDetails_day_text" style="color: #E05E5B;">{{ birthdayDetail.countdownDay
            }}
          </text>
          <text class="dayDetail_birthday_timeDetails_day_unit ml_10" style="color: #E05E5B;">天</text>
        </template>
        <template v-else-if="birthdayDetail.countdownDay == 0">
          <text class="dayDetail_birthday_timeDetails_day_text" style="color: #E05E5B;">今天</text>
        </template>
      </view>
      <view class="dayDetail_birthday_nextTimeDetails flex align-center justify-center">
        <text class="dayDetail_birthday_timeDetails_text" style="font-size: 24rpx;color: #000000;font-weight: 500;">
          {{ options.index == 1 ? birthdayDetail.next_public_time : dayjs(birthdayDetail.countdown.date).format('YYYY年MM月DD日')
          }} {{
            birthdayDetail.countdown.mDay }} {{ dayjs(birthdayDetail.countdown.date).format('dddd') }}
        </text>
      </view>
      <view class="hW_103"></view>
      <view class="dayDetail_birthday_operation flex align-center justify-center" @click.stop="editDay">
        <text class="dayDetail_birthday_operation_text">编辑生日</text>
      </view>
    </view>
    <view class="dayDetail_anniversary" v-if="options.type != 1">
      <image class="dayDetail_anniversary_iconFirst" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
      <image class="dayDetail_anniversary_iconSecond" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
      <image class="dayDetail_anniversary_iconThird" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
      <image class="dayDetail_anniversary_iconFourth" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
      <view class="dayDetail_anniversary_avatar">
        <image-avater :src="`${nc_image}${birthdayDetail.avatar}`" :width="96" :height="96"
                      :mode="'widthFix'"></image-avater>
      </view>
      <view class="dayDetail_anniversary_name">
        <text class="dayDetail_anniversary_name_text">{{ birthdayDetail.name }}</text>
      </view>
      <template v-if="birthdayDetail.countdownDay>0">
        <view class="dayDetail_anniversary_identity">
          <text class="dayDetail_anniversary_identity_text">还有</text>
        </view>
        <view class="dayDetail_anniversary_day">
          <text class="dayDetail_anniversary_day_text">{{ birthdayDetail.countdownDay }}</text>
        </view>
        <view class="dayDetail_anniversary_unit">
          <text class="dayDetail_anniversary_unit_text">天</text>
        </view>
      </template>
      <template v-else>
        <view class="dayDetail_anniversary_day">
          <text class="dayDetail_anniversary_day_text">今天</text>
        </view>
      </template>
      <view class="dayDetail_anniversary_timeDetails flex align-center justify-center">
        <text class="dayDetail_anniversary_timeDetails_text" style="color: #000000">
          {{ options.index == 1 ? birthdayDetail.next_public_time : dayjs(birthdayDetail.countdown?.date).format('YYYY年MM月DD日')
          }} {{
            birthdayDetail.countdown?.mDay }} {{ dayjs(birthdayDetail.countdown?.date).format('dddd') }}
        </text>
      </view>
      <view class="dayDetail_anniversary_bottomButton flex align-center justify-center" @click.stop="editDay">
        <text class="dayDetail_anniversary_bottomButton_text">编辑纪念日</text>
      </view>
      <image :src="`${IMG_URL}/index/down_background.png`" class="dayDetail_anniversary_downBackground"></image>
      <!--      <image :src="`${IMG_URL}share.png`" class="dayDetail_anniversary_shareIcon"></image>-->
    </view>
  </view>
</template>

<script>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import dayjs from 'dayjs';

  export default {
    components: { ImageAvater, HeaderTitle },
    data() {
      return {
        // 头部高度
        headerHeight: 0,

        // 生日详情
        birthdayDetail: {},
        memberInfo: {},
      };
    },
    props: {
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      dayjs() {
        return dayjs;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    methods: {
      setOption() {
        if (this.options.type == 1) {
          if (this.options.index == 1) {
            this.getFindDay();
          } else {
            this.getBirthdayDetails();
          }
        } else {
          if (this.options.index == 1) {
            this.getFindDay();
          } else {
            this.getBirthdayDetails();
          }
        }
      },
      getPageHeight(number) {
        this.headerHeight = number;
      },
      async editDay() {
        if (this.options.is_genealogy == 1) {
          const { code, msg } = await sheep.$api.genealogy.checkAuth({
            genealogy_id: this.options.id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          if (this.options.index == 1) {
            if (this.options.type == 1) {
              uni.setStorageSync('birthInfo', JSON.stringify(this.birthdayDetail));
              this.$nav.navigateTo('/pages/familyAnniversary/friendSBirthday/friendSBirthday', { isEdit: 1 });
            } else {
              uni.setStorageSync('dayFriend', JSON.stringify(this.birthdayDetail));
              this.$nav.navigateTo('/pages/familyAnniversary/friendsDay/friendsDay', { isEdit: 1 });
            }
          } else {
            if (this.options.type == 1) {
              sheep.$router.go('/pages/family/birthday', {
                flag: 1,
                birthday_id: this.birthdayDetail.id,
                member_id: this.birthdayDetail.relation_id,
                date: this.birthdayDetail.date,
                username: this.birthdayDetail.member_username,
                time_type: this.birthdayDetail.time_type,
                isLeapMonth: this.birthdayDetail.is_leap_month,
                is_genealoy: this.options.is_genealogy == 1 ? 1 : 0,
              });
            } else {
              sheep.$router.go('/pages/family/anniversary', {
                name: this.birthdayDetail.name || '',
                is_flag: 1,
                isEdit: 1,
                anniversaryId: this.birthdayDetail.id,
                member_id: this.birthdayDetail.relation_id,
                username: this.birthdayDetail.member_names || this.birthdayDetail.member_username,
                date: this.birthdayDetail.date,
                time_type: this.birthdayDetail.time_type,
                isLeapMonth: this.birthdayDetail.is_leap_month,
                family_id: this.options.family_id,
                is_genealoy: this.options.is_genealogy == 1 ? 1 : 0,
              });
            }
          }
        } else {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: this.options.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          if (this.options.index == 1) {
            if (this.options.type == 1) {
              uni.setStorageSync('birthInfo', JSON.stringify(this.birthdayDetail));
              this.$nav.navigateTo('/pages/familyAnniversary/friendSBirthday/friendSBirthday', { isEdit: 1 });
            } else {
              uni.setStorageSync('dayFriend', JSON.stringify(this.birthdayDetail));
              this.$nav.navigateTo('/pages/familyAnniversary/friendsDay/friendsDay', { isEdit: 1 });
            }
          } else {
            if (this.options.type == 1) {
              sheep.$router.go('/pages/family/birthday', {
                flag: 1,
                birthday_id: this.birthdayDetail.id,
                member_id: this.birthdayDetail.member_id,
                date: this.birthdayDetail.date,
                username: this.birthdayDetail.member_username,
                time_type: this.birthdayDetail.time_type,
                isLeapMonth: this.birthdayDetail.is_leap_month,
              });
            } else {
              // console.log(this.birthdayDetail);
              sheep.$router.go('/pages/family/anniversary', {
                name: this.birthdayDetail.name || '',
                is_flag: 1,
                isEdit: 1,
                anniversaryId: this.birthdayDetail.id,
                member_id: this.birthdayDetail.member_id,
                username: this.birthdayDetail.member_names || this.birthdayDetail.member_username,
                date: this.birthdayDetail.date,
                time_type: this.birthdayDetail.time_type,
                isLeapMonth: this.birthdayDetail.is_leap_month,
                family_id: this.options.family_id,
              });
            }
          }
        }
      },
      // 获取生日详情
      async getBirthdayDetails() {
        if (this.options.is_genealogy == 1) {
          let { data } = await sheep.$api.genealogy.getFamilyMemoryDayDetail({
            id: this.options.record_id,
          });
          this.birthdayDetail = data;
          let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
          this.memberInfo = memberInfo.data;
        } else {
          let { data } = await sheep.$api.family.getFamilyMemoryDayDetail({
            id: this.options.record_id,
          });
          this.birthdayDetail = data;
          let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
          this.memberInfo = memberInfo.data;
        }
      },
      // 获取朋友纪念日生日详情
      async getFindDay() {
        let { data } = await sheep.$api.family.getFamilyMemoryDayDetail({ id: this.options.record_id });
        this.birthdayDetail = data;
        let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
        this.memberInfo = memberInfo.data;
      },
      // 转换农历
      chineseCalendar(date) {
        if (!date) {
          return;
        }
        let year = date.split('年');
        let month = year[1].split('月');
        let lunar = dayjs(`${year[0]}-${month[0]}-${month[1].split('日')[0]}`).format('dddd');
        return lunar;
      },
      // 获取公历日期
      publicDate(date) {
        if (!date) {
          return;
        }
        let res = calendar.solar2lunar(date.split('-')[0], date.split('-')[1], date.split('-')[2]);
        return res.IMonthCn + res.IDayCn;
      },
    },
  };
</script>

<style lang="scss">
  .dayDetail {
    width: 750rpx;
    min-height: 100vh;
    background: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;

    .dayDetail_birthday {
      width: 750rpx;
      height: 100vh;
      background: url($uni-bg-url-sq + "/index/birthdayBackground01.png") no-repeat;
      background-size: 750rpx 100vh;
      position: relative;

      .dayDetail_birthday_name {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 57rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_birthday_timeDetails {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_birthday_nextTimeDetails {
        width: 519rpx;
        height: 45rpx;
        border-radius: 21rpx 21rpx 21rpx 21rpx;
        border: 2rpx solid #EC6B68;

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: red;
        }
      }

      .dayDetail_birthday_timeDetails_title {

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_birthday_timeDetails_day {

        .dayDetail_birthday_timeDetails_day_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 127rpx;
          color: #FFFFFF;
        }

        .dayDetail_birthday_timeDetails_day_unit {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_birthday_timeDetails_content {
        position: absolute;
        top: 565rpx;
        left: 50%;
        transform: translateX(-50%);
        padding: 21rpx 28rpx;
        width: 662rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 2rpx solid #FFFFFF;

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_birthday_operation {
        width: 124rpx;
        height: 37rpx;
        background: #E05E5B;
        border-radius: 19rpx 19rpx 19rpx 19rpx;


        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 25rpx;
          color: #FFFFFF;
        }
      }
    }

    .dayDetail_anniversary {
      width: 750rpx;
      height: 100vh;
      background: linear-gradient(180deg, #5C98E7 0%, #CEE0F9 100%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      position: relative;


      .dayDetail_anniversary_iconFirst {
        position: absolute;
        top: 21rpx;
        right: 44rpx;
        width: 375rpx;
        height: 306rpx;
      }

      .dayDetail_anniversary_iconSecond {
        position: absolute;
        top: 310rpx;
        left: 64rpx;
        width: 199rpx;
        height: 162rpx;
      }

      .dayDetail_anniversary_iconThird {
        position: absolute;
        top: 723rpx;
        right: 144rpx;
        width: 80rpx;
        height: 65rpx;
      }

      .dayDetail_anniversary_iconFourth {
        position: absolute;
        top: 632rpx;
        right: 24rpx;
        width: 155rpx;
        height: 127rpx;
      }

      .dayDetail_anniversary_avatar {
        position: absolute;
        top: 579rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 96rpx;
        height: 96rpx;
      }

      .dayDetail_anniversary_name {
        position: absolute;
        top: 681rpx;
        left: 50%;
        transform: translateX(-50%);

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_anniversary_identity {
        position: absolute;
        top: 750rpx;
        left: 50%;
        transform: translateX(-50%);

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_anniversary_day {
        position: absolute;
        top: 766rpx;
        left: 50%;
        transform: translateX(-50%);

        .dayDetail_anniversary_day_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 98rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_anniversary_unit {
        position: absolute;
        top: 897rpx;
        left: 50%;
        transform: translateX(-50%);

        .dayDetail_anniversary_unit_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_anniversary_timeDetails {
        position: absolute;
        top: 945rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 497rpx;
        height: 51rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        border: 2rpx solid #FFFFFF;

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }

      .dayDetail_anniversary_bottomButton {
        position: absolute;
        top: 1032rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 166rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 36rpx 36rpx 36rpx 36rpx;

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 25rpx;
          color: #FF4206;
        }
      }

      .dayDetail_anniversary_downBackground {
        position: absolute;
        bottom: 38rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 77rpx;
        height: 77rpx;
      }

      .dayDetail_anniversary_shareIcon {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 44rpx;
        top: 47rpx;
      }
    }
  }
</style>
